﻿@model Props.AdminWeb.Models.ProfileIndexModel
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@*<div class="container">*@
    <div class="row-fluid">
        <div class="span3 bs-docs-sidebar hidden-phone">
            <ul class="nav nav-list bs-docs-sidenav affix">
                <li><a href="#basic"><i class="icon-chevron-right"></i>Datos Generales</a></li>
                <li><a href="#addresses"><i class="icon-chevron-right"></i>Direcciones</a></li>
                <li><a href="#phones"><i class="icon-chevron-right"></i>Teléfonos</a></li>
                <li><a href="#emails"><i class="icon-chevron-right"></i>Emails</a></li>
                <li><a href="#networks"><i class="icon-chevron-right"></i>Redes Sociales</a></li>
            </ul>
        </div>
        <div class="span9">
            <section id="basic">
                <div class="page-header">
                    <h2>
                        Datos Generales</h2>
                </div>
                <p>
                    Ingrese aquí los datos tal cual los quiere mostrar en la portada de su página, mails,
                    etc. para representar a su empresa.
                </p>
                <br />
                <div id="basic-form" class="well">
                    <div class="control-group" id="basic-title-control-group">
                        <label>
                            Título</label>
                        <input type="text" class="full-width" id="basic-title" placeholder="Ingrese un título..." maxlength="20" value="@Model.VendorProfile.Title" />
                        <span class="help-block" id="basic-title-help-block">Hasta 20 caracteres.</span>
                    </div>
                    <div class="control-group" id="basic-description-control-group">
                        <label>
                            Descripción</label>
                        <textarea rows="3" maxlength="80" cols="20" class="full-width no-resize" id="basic-description" placeholder="Ingrese una Breve descripción de su empresa...">@Model.VendorProfile.Description</textarea>
                        <span class="help-block" id="basic-description-help-block">Hasta 50 caracteres.</span>
                    </div>
                    <div class="control-group" id="basic-control-group">
                        <p>
                            <button type="button" class="btn btn-success btn-small" id="basic-submit" style="margin-top: 10px;">
                                Guardar Cambios</button>
                        </p>
                        <span class="help-block" id="basic-help-block"></span>
                    </div>
                </div>
            </section>
            <section id="addresses">
                <div class="page-header">
                    <h2>
                        Direcciones Postales</h2>
                </div>
                <p>
                    Ingrese aquí sus direcciones postales tal cual quiere que aparezcan en la portada
                    de su página.
                </p>
                <br />
                <div id="addresses-form" class="well">
                    <div class="control-group" id="address-table-control-group">
                    <table id="address-table" style="width:100%">
                        <tbody>
                            @if (Model.VendorProfile.Addresses.Length == 0)
                            {
                                <tr>
                                    <td colspan="2">
                                        Aún no ha agregado ninguna dirección.
                                    </td>
                                </tr>
                            }
                            else
                            {
                                foreach (var address in Model.VendorProfile.Addresses)
                                {
                                <tr>
                                    <td style="width:100%">@address
                                    </td>
                                    <td>
                                        <a onclick="removeAddress(this, '@address')">Remover</a>
                                    </td>
                                </tr>
                                }
                            }
                        </tbody>
                    </table>
                    <span class="help-block" id="address-table-help-block"></span>
                    </div>
                    <br />
                    <div class="control-group" id="new-address-control-group">
                        <label>
                            Nueva Dirección</label>
                        <input type="text" class="full-width" id="new-address" placeholder="Ingrese aquí una dirección..." maxlength="50" />
                        <p>
                            <button type="button" class="btn btn-success btn-small" id="new-address-submit" style="margin-top: 10px;">
                                Agregar</button>
                        </p>
                        <span class="help-block" id="new-address-help-block"></span>
                    </div>
                </div>
            </section>
            <section id="phones">
                <div class="page-header">
                    <h2>
                        Teléfonos</h2>
                </div>
                <p>
                    Ingrese aquí sus teléfonos tal cual quiere que aparezcan en la portada
                    de su página.
                </p>
                <br />
                <div id="phones-form" class="well">
                    <div class="control-group" id="phone-table-control-group">
                    <table id="phone-table" style="width:100%">
                        <tbody>
                            @if (Model.VendorProfile.Phones.Length == 0)
                            {
                                <tr>
                                    <td colspan="2">
                                        Aún no ha agregado ningún teléfono.
                                    </td>
                                </tr>
                            }
                            else
                            {
                                foreach (var phone in Model.VendorProfile.Phones)
                                {
                                <tr>
                                    <td style="width:100%">@phone
                                    </td>
                                    <td>
                                        <a onclick="removePhone(this, '@phone')">Remover</a>
                                    </td>
                                </tr>
                                }
                            }
                        </tbody>
                    </table>
                    <span class="help-block" id="phone-table-help-block"></span>
                    </div>
                    <br />
                    <div class="control-group" id="new-phone-control-group">
                        <label>
                            Nuevo Teléfono</label>
                        <input type="text" class="full-width" id="new-phone" placeholder="Ingrese aquí un teléfono..." maxlength="50" />
                        <p>
                            <button type="button" class="btn btn-success btn-small" id="new-phone-submit" style="margin-top: 10px;">
                                Agregar</button>
                        </p>
                        <span class="help-block" id="new-phone-help-block"></span>
                    </div>
                </div>
            </section>
            <section id="emails">
                <div class="page-header">
                    <h2>
                        Correos electrónicos</h2>
                </div>
                <p>
                    Ingrese aquí los datos tal cual los quiere mostrar en la portada de su página, mails,
                    etc. para representar a su empresa.
                </p>
                <br />
                <div id="emails-form" class="well">
                    <div class="control-group" id="email-table-control-group">
                    <table id="email-table" style="width:100%">
                        <tbody>
                            @if (Model.VendorProfile.Emails.Length == 0)
                            {
                                <tr>
                                    <td colspan="2">
                                        Aún no ha agregado ningún e-mail.
                                    </td>
                                </tr>
                            }
                            else
                            {
                                foreach (var email in Model.VendorProfile.Emails)
                                {
                                <tr>
                                    <td style="width:100%">@email
                                    </td>
                                    <td>
                                        <a onclick="removeEmail(this, '@email')">Remover</a>
                                    </td>
                                </tr>
                                }
                            }
                        </tbody>
                    </table>
                    <span class="help-block" id="email-table-help-block"></span>
                    </div>
                    <br />
                    <div class="control-group" id="new-email-control-group">
                        <label>
                            Nuevo Email</label>
                        <input type="text" class="full-width" id="new-email" placeholder="Ingrese aquí un e-mail..." maxlength="50" />
                        <p>
                            <button type="button" class="btn btn-success btn-small" id="new-email-submit" style="margin-top: 10px;">
                                Agregar</button>
                        </p>
                        <span class="help-block" id="new-email-help-block"></span>
                    </div>
                </div>
            </section>
            <section id="networks">
                <div class="page-header">
                    <h2>
                        Redes Sociales</h2>
                </div>
                <p>
                    Ingrese aquí los datos tal cual los quiere mostrar en la portada de su página, mails,
                    etc. para representar a su empresa.
                </p>
                <br />                
                <div id="networks-form" class="well">
                    <div class="control-group" id="network-table-control-group">
                    <table id="network-table" style="width:100%">
                        <tbody>
                            @if (Model.VendorProfile.Networks.Length == 0)
                            {
                                <tr>
                                    <td colspan="2">
                                        Aún no ha agregado ningún link a redes sociales.
                                    </td>
                                </tr>
                            }
                            else
                            {
                                foreach (var network in Model.VendorProfile.Networks)
                                {
                                <tr>
                                    <td style="width:100%">@network
                                    </td>
                                    <td>
                                        <a onclick="removeNetwork(this, '@network')">Remover</a>
                                    </td>
                                </tr>
                                }
                            }
                        </tbody>
                    </table>
                    <span class="help-block" id="network-table-help-block"></span>
                    </div>
                    <br />
                    <div class="control-group" id="new-network-control-group">
                        <label>
                            Nueva Red</label>
                        <input type="text" class="full-width" id="new-network" placeholder="Ingrese aquí un link a una red social..." maxlength="50" />
                        <p>
                            <button type="button" class="btn btn-success btn-small" id="new-network-submit" style="margin-top: 10px;">
                                Agregar</button>
                        </p>
                        <span class="help-block" id="new-network-help-block"></span>
                    </div>
                </div>
            </section>
        </div>
    </div>
@*</div>*@
@section Scripts {
    <script type="text/javascript">
        $(document).ready(function () {
            $('.bs-docs-sidenav').affix({ offset: 40 });

            // Update Basic Information
            $("#basic-submit").click(function () {
                updateBasicData();
            });

            // Add new address
            $("#new-address-submit").click(function () {
                addProfileItem('address', '@Url.Action("AddNewAddress", "Profile")', 'removeAddress');
            });

            // Add new phone
            $("#new-phone-submit").click(function () {
                addProfileItem('phone', '@Url.Action("AddNewPhone", "Profile")', 'removePhone');
            });

            // Add new email
            $("#new-email-submit").click(function () {
                addProfileItem('email', '@Url.Action("AddNewEmail", "Profile")', 'removeEmail');
            });

            // Add new social network
            $("#new-network-submit").click(function () {
                addProfileItem('network', '@Url.Action("AddNewNetwork", "Profile")', 'removeNetwork');
            });
        });

        function updateBasicData() 
        {
            var title = $("#basic-title").val();

            if (title == '') {
                showMessage('basic-title', 'error', 'Ingrese un título.');
                return;
            }

            removeMessage('basic-title');

            var description = $("#basic-description").val();

            $("#basic-submit").text("Guardando...");

            $.ajax({
                type: 'POST',
                url: '@Url.Action("UpdateBasic", "Profile")',
                data: { title: title, description: description },
                dataType: 'json',
                success: function (response) {
                    if (response.hasError) {

                        showMessage('basic', 'error', '<i class="icon-remove"></i> ' + response.message);

                        $("#basic-submit").text("Guardar");

                    }
                    else {
                        showMessage('basic', 'success', '<i class="icon-ok"></i> Los datos se actualizaron correctamente.');

                        $("#navbar-vendor-title").text(title + ' - Consola de Administración');

                        $("#basic-submit").text("Guardar");
                    }
                },
                error: function (response) {
                    showMessage('basic', 'error', '<i class="icon-remove"></i> ' + response.message);

                    $("#basic-submit").text("Guardar");
                }
            });
        }

        function removeAddress(link, address) {
            removeProfileItem('address', '@Url.Action("RemoveAddress", "Profile")', link, address);
        }

        function removePhone(link, phone) {
            removeProfileItem('phone', '@Url.Action("RemovePhone", "Profile")', link, phone);
        }

        function removeEmail(link, email) {
            removeProfileItem('email', '@Url.Action("RemoveEmail", "Profile")', link, email);
        }

        function removeNetwork(link, network) {
            removeProfileItem('network', '@Url.Action("RemoveNetwork", "Profile")', link, network);
        }

        function removeProfileItem(itemName, url, link, value) {
            var linkText = $(link).text();
            $(link).text('Removiendo...');

            $.ajax({
                type: 'POST',
                url: url,
                data: { value: value },
                dataType: 'json',
                success: function (response) {
                    if (response.hasError) {

                        showMessage(itemName + '-table', 'error', '<i class="icon-remove"></i> ' + response.message);
                    }
                    else {

                        var tr = link.parentElement.parentElement;

                        $(tr).remove();

                        $("#new-" + itemName + "-submit").text(linkText);
                        $("#new-" + itemName).focus();
                        $("#new-" + itemName).select();
                    }

                    $(link).text(linkText);
                },
                error: function (response) {
                    showMessage(itemName + '-table', 'error', '<i class="icon-remove"></i> ' + response.message);

                    $(link).text(linkText);
                }
            });

            removeMessage('new-' + itemName);
        }

        function addProfileItem(itemName, url, removeFunc) {
            var itemValue = $("#new-" + itemName).val();

            var btnText = $("#new-" + itemName + "-submit").text();
            $("#new-" + itemName + "-submit").text("Guardando...");

            $.ajax({
                type: 'POST',
                url: url,
                data: { value: itemValue },
                dataType: 'json',
                success: function (response) {
                    if (response.hasError) {

                        showMessage('new-' + itemName, 'error', '<i class="icon-remove"></i> ' + response.message);

                        $("#new-" + itemName + "-submit").text(btnText);

                    }
                    else {
                        var newTr = '<tr><td style="width:100%">' + itemValue + '</td><td><a onclick="' + removeFunc + '(this, \'' + itemValue + '\')">Remover</a></td></tr>';
                        $('#' + itemName + '-table').append(newTr);

                        showMessage('new-' + itemName, 'success', '<i class="icon-ok"></i> Los datos guardaron correctamente.');

                        $("#new-" + itemName + "-submit").text(btnText);
                        $("#new-" + itemName + "").focus();
                        $("#new-" + itemName + "").select();
                    }
                },
                error: function (response) {
                    showMessage('new-' + itemName, 'error', '<i class="icon-remove"></i> ' + response.message);

                    $("#new-" + itemName + "-submit").text(btnText);
                }
            });
        }
    </script>
}
